<template>
  <view class="user-container">
    <view class="page-header">
      <text class="title">用户管理</text>
      <button class="add-btn" @click="handleAdd">新增用户</button>
    </view>
    
    <view class="search-bar">
      <input type="text" placeholder="请输入用户名" v-model="searchKey" />
      <button @click="handleSearch">搜索</button>
    </view>
    
    <view class="table-container">
      <view class="table-header">
        <view class="th">用户名</view>
        <view class="th">角色</view>
        <view class="th">状态</view>
        <view class="th">操作</view>
      </view>
      <view class="table-body">
        <view class="tr" v-for="(item, index) in userList" :key="index">
          <view class="td">{{ item.username }}</view>
          <view class="td">{{ item.role }}</view>
          <view class="td">{{ item.status }}</view>
          <view class="td">
            <text class="action-btn" @click="handleEdit(item)">编辑</text>
            <text class="action-btn delete" @click="handleDelete(item)">删除</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      userList: [
        { username: 'admin', role: '管理员', status: '正常' },
        { username: 'user1', role: '普通用户', status: '正常' },
        { username: 'user2', role: '普通用户', status: '禁用' }
      ]
    }
  },
  methods: {
    handleAdd() {
      uni.showToast({
        title: '新增用户',
        icon: 'none'
      })
    },
    handleSearch() {
      uni.showToast({
        title: '搜索：' + this.searchKey,
        icon: 'none'
      })
    },
    handleEdit(item) {
      uni.showToast({
        title: '编辑用户：' + item.username,
        icon: 'none'
      })
    },
    handleDelete(item) {
      uni.showModal({
        title: '提示',
        content: '确定要删除用户 ' + item.username + ' 吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

<style>
.user-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.add-btn {
  background-color: #1890ff;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
}

.search-bar {
  display: flex;
  margin-bottom: 20px;
}

.search-bar input {
  flex: 1;
  padding: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  margin-right: 10px;
}

.search-bar button {
  background-color: #1890ff;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
}

.table-container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.table-header {
  display: flex;
  background-color: #fafafa;
  border-bottom: 1px solid #e8e8e8;
}

.th {
  flex: 1;
  padding: 12px;
  text-align: center;
  font-weight: bold;
}

.table-body {
  display: flex;
  flex-direction: column;
}

.tr {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
}

.td {
  flex: 1;
  padding: 12px;
  text-align: center;
}

.action-btn {
  color: #1890ff;
  margin: 0 10px;
  cursor: pointer;
}

.action-btn.delete {
  color: #ff4d4f;
}
</style> 